<template>
  <base-table
    :url="url"
    :table-field-list="tableFieldList"
    :submit-form="submitForm"
    submit-form-title="仓库信息"
    @data-format="dataFormat"
    @set-form-init-value="setFormInitValue"
    @submit-valid="submitValid"
  >
    <template #submitForm>
      <el-form
        :model="submitForm"
        :rules="formRules"
        :label-width="100"
        ref="submitFormRef"
      >
        <el-form-item label="仓库编号：" prop="no">
          <el-input v-model="submitForm.no"></el-input>
        </el-form-item>
        <el-form-item label="仓库名：" prop="name">
          <el-input v-model="submitForm.name"></el-input>
        </el-form-item>
        <el-form-item label="仓库类别编号：" prop="categoryNo">
          <autocomplete-input
            v-model="submitForm.categoryNo"
            :value-key="selectedPropMap.selectedOriginProp"
            @get-record="getRecords"
            @change="
              setSelectRow(
                selectedPropMap.setProp,
                selectedPropMap.setOriginProp,
                selectedPropMap.selectedProp
              )
            "
            @select="
              setSelectRow(
                selectedPropMap.setProp,
                selectedPropMap.setOriginProp,
                selectedPropMap.selectedProp
              )
            "
          ></autocomplete-input>
        </el-form-item>
        <el-form-item label="仓库类别名：" prop="categoryName">
          <el-input v-model="submitForm.categoryName" disabled></el-input>
        </el-form-item>
        <el-form-item label="仓库位置：" prop="address">
          <el-input v-model="submitForm.address"></el-input>
        </el-form-item>
        <el-form-item label="仓库管理员：" prop="chargePerson">
          <el-input v-model="submitForm.chargePerson"></el-input>
        </el-form-item>
        <el-form-item label="管理员电话：" prop="chargePhone">
          <el-input v-model="submitForm.chargePhone"></el-input>
        </el-form-item>
        <el-form-item label="仓库描述：" prop="description">
          <el-input v-model="submitForm.description"></el-input>
        </el-form-item>
      </el-form>
    </template>
  </base-table>
</template>

<script lang="ts" setup>
import BaseTable from "@/components/table/basic/BaseTable.vue";
import { TableField, TableUrl } from "@/models/TableSetting";
import { ref } from "vue";
import AutocompleteInput from "@/components/input/AutocompleteInput.vue";
import { SelectedPropMap } from "@/components/input/SelectedPropMap";
import { AutocompleteInputEvent } from "@/components/input/AutocompleteInputEvent";
import { Warehouse } from "@/models/dataSpace/Warehouse";

const url = {
  refreshUrl: "/basic-request/Warehouse",
  modifyingSingleUrl: "/basic-request/Warehouse",
  deleteUrl: "/basic-request/Warehouse/batchDelete",
} as TableUrl;

const tableFieldList = [
  {
    filedName: "no",
    label: "仓库编号",
    width: 220,
  },
  {
    filedName: "name",
    label: "仓库名",
    width: 220,
  },
  {
    filedName: "categoryNo",
    label: "仓库类别编号",
    width: 220,
  },
  {
    filedName: "categoryName",
    label: "仓库类别名",
    width: 220,
  },
  {
    filedName: "address",
    label: "仓库位置",
    width: 220,
  },
  {
    filedName: "chargePerson",
    label: "仓库管理员",
    width: 220,
  },
  {
    filedName: "chargePhone",
    label: "管理员电话",
    width: 220,
  },
  {
    filedName: "description",
    label: "仓库描述",
    width: 220,
  },
  {
    filedName: "createUser",
    label: "创建人",
    width: 220,
  },
  {
    filedName: "createGmt",
    label: "创建时间",
    width: 220,
  },
  {
    filedName: "modifiedUser",
    label: "修改人",
    width: 220,
  },
  {
    filedName: "modifiedGmt",
    label: "修改时间",
    minWidth: 220,
  },
] as Array<TableField>;

// 校验规则
const formRules = {
  no: [
    {
      required: true,
      message: "仓库编号不能为空",
      trigger: "blur",
    },
  ],
  categoryNo: [
    {
      required: true,
      message: "仓库类别编号不能为空",
      trigger: "blur",
    },
    {
      required: true,
      message: "仓库类别编号不能为空",
      trigger: "change",
    },
  ],
  categoryName: [
    {
      required: true,
      message: "仓库类别名不能为空",
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      message: "仓库位置不能为空",
      trigger: "blur",
    },
  ],
};
// 数据规范, 表中没有需要规范格式的数据, 则不需要这一行.
const dataFormat = (
  columnName: string,
  cellValue: string,
  callback: (value: string) => void
) => {
  if (columnName === "createUser") {
    callback(cellValue);
  }
};

// 申明表单
const submitFormRef = ref();

const submitForm = ref({} as Warehouse);

const setFormInitValue = (formType: string, row: Warehouse) => {
  if (undefined !== submitFormRef.value) {
    submitFormRef.value.clearValidate();
  }
  switch (formType) {
    case "insert":
      submitForm.value = {
        no: "",
        name: "",
        categoryNo: "",
        categoryName: "",
        address: "",
        chargePerson: "",
        chargePhone: "",
        description: "",
        createUser: sessionStorage.getItem("token") as string,
        createGmt: new Date(),
      } as Warehouse;
      break;
    case "update":
      submitForm.value = row;
      submitForm.value.modifiedUser = sessionStorage.getItem("token") as string;
      submitForm.value.modifiedGmt = new Date();
      break;
  }
};

//远程搜索和名称跟随
const selectedPropMap = {
  selectedProp: "categoryNo",
  selectedOriginProp: "categoryNo",
  setProp: "categoryName",
  setOriginProp: "categoryName",
} as SelectedPropMap;

const { getRecords, setSelectRow } = AutocompleteInputEvent(
  "/basic-request/BasicCategoryWarehouse",
  submitForm,
  selectedPropMap
);
/**
 * 提交数据前的校验
 * @param callback 回调函数,将校验结果返还到Table组件中.
 */
const submitValid = (callback: (value: boolean) => void) => {
  submitFormRef.value
    .validate()
    .then(() => {
      callback(true);
    })
    .catch(() => {
      callback(false);
    });
};
</script>

<style scoped></style>
